import { View, Text, ScrollView, TouchableOpacity, StyleSheet, Platform } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { theme } from '../../theme';

interface StatCardProps {
  icon: string;
  label: string;
  value: string;
}

function StatCard({ icon, label, value }: StatCardProps) {
  return (
    <View style={styles.statCard}>
      <Ionicons name={icon as any} size={24} color={theme.colors.primary} />
      <Text style={styles.statLabel}>{label}</Text>
      <Text style={styles.statValue}>{value}</Text>
    </View>
  );
}

interface TaskCardProps {
  title: string;
  deadline: string;
  progress: number;
  status: 'pending' | 'inProgress' | 'completed';
}

function TaskCard({ title, deadline, progress, status }: TaskCardProps) {
  const statusColors = {
    pending: theme.colors.status.pending,
    inProgress: theme.colors.status.inProgress,
    completed: theme.colors.status.completed,
  };

  const statusText = {
    pending: '待处理',
    inProgress: '进行中',
    completed: '已完成',
  };

  return (
    <View style={styles.taskCard}>
      <View style={styles.taskHeader}>
        <View style={styles.taskIconContainer}>
          <Ionicons name="clipboard-outline" size={20} color={theme.colors.primary} />
        </View>
        <View style={styles.taskContent}>
          <Text style={styles.taskTitle}>{title}</Text>
          <Text style={styles.taskDeadline}>截止日期: {deadline}</Text>
        </View>
        <View style={[styles.taskStatus, { backgroundColor: statusColors[status] }]}>
          <Text style={styles.taskStatusText}>{statusText[status]}</Text>
        </View>
      </View>
      <View style={styles.progressContainer}>
        <View style={styles.progressBar}>
          <View 
            style={[styles.progressFill, { width: `${progress}%`, backgroundColor: statusColors[status] }]} 
          />
        </View>
        <Text style={styles.progressText}>{progress}%</Text>
      </View>
    </View>
  );
}

interface NoticeCardProps {
  title: string;
  date: string;
  type: string;
}

function NoticeCard({ title, date, type }: NoticeCardProps) {
  return (
    <TouchableOpacity style={styles.noticeCard}>
      <View style={styles.noticeIconContainer}>
        <Ionicons name="notifications-outline" size={20} color={theme.colors.primary} />
      </View>
      <View style={styles.noticeContent}>
        <Text style={styles.noticeTitle}>{title}</Text>
        <Text style={styles.noticeDate}>{date}</Text>
      </View>
      <Ionicons name="chevron-forward" size={20} color={theme.colors.text.tertiary} />
    </TouchableOpacity>
  );
}

export default function WorkspaceScreen() {
  return (
    <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
      {/* User Card */}
      <View style={styles.userCard}>
        <View>
          <Text style={styles.userName}>张明</Text>
          <Text style={styles.userRole}>网格员 | 东湖社区</Text>
        </View>
        <View style={styles.avatar}>
          <Text style={styles.avatarText}>张</Text>
        </View>
      </View>

      {/* Stats Overview */}
      <View style={styles.statsGrid}>
        <StatCard icon="home-outline" label="楼房" value="24" />
        <StatCard icon="business-outline" label="房屋" value="156" />
        <StatCard icon="people-outline" label="户籍" value="89" />
        <StatCard icon="person-outline" label="人口" value="312" />
        <StatCard icon="videocam-outline" label="部件" value="45" />
        <StatCard icon="storefront-outline" label="企业" value="18" />
        <StatCard icon="warning-outline" label="事件" value="7" />
        <StatCard icon="home-outline" label="院落" value="32" />
      </View>

      {/* Tasks Section */}
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>待办事项</Text>
        <TaskCard 
          title="东湖社区人口信息采集"
          deadline="2023-06-20"
          progress={60}
          status="inProgress"
        />
        <TaskCard 
          title="安全隐患排查"
          deadline="2023-06-18"
          progress={30}
          status="inProgress"
        />
      </View>

      {/* Notices Section */}
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>通知公告</Text>
        <NoticeCard 
          title="关于开展农村人居环境整治工作的通知"
          date="2023-06-15"
          type="notice"
        />
        <NoticeCard 
          title="振兴乡村政策宣讲会通知"
          date="2023-06-10"
          type="notice"
        />
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: theme.colors.background.default,
  },
  userCard: {
    backgroundColor: theme.colors.primary,
    padding: 20,
    margin: 16,
    borderRadius: 12,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  userName: {
    fontSize: 20,
    fontWeight: '600',
    color: theme.colors.white,
    marginBottom: 4,
  },
  userRole: {
    fontSize: 14,
    color: 'rgba(255, 255, 255, 0.8)',
  },
  avatar: {
    width: 50,
    height: 50,
    borderRadius: 25,
    backgroundColor: theme.colors.white,
    justifyContent: 'center',
    alignItems: 'center',
  },
  avatarText: {
    fontSize: 20,
    fontWeight: '600',
    color: theme.colors.primary,
  },
  statsGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    padding: 12,
    gap: 8,
  },
  statCard: {
    backgroundColor: theme.colors.white,
    borderRadius: 12,
    padding: 12,
    alignItems: 'center',
    width: (Platform.OS === 'web' ? 'calc(25% - 8px)' : '23%'),
    ...theme.shadows,
  },
  statLabel: {
    fontSize: 12,
    color: theme.colors.text.secondary,
    marginTop: 4,
  },
  statValue: {
    fontSize: 16,
    fontWeight: '600',
    color: theme.colors.text.primary,
    marginTop: 2,
  },
  section: {
    padding: 16,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: theme.colors.text.primary,
    marginBottom: 12,
  },
  taskCard: {
    backgroundColor: theme.colors.white,
    borderRadius: 12,
    padding: 16,
    marginBottom: 12,
    ...theme.shadows,
  },
  taskHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 12,
  },
  taskIconContainer: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: theme.colors.primaryLight,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 12,
  },
  taskContent: {
    flex: 1,
  },
  taskTitle: {
    fontSize: 16,
    fontWeight: '500',
    color: theme.colors.text.primary,
    marginBottom: 4,
  },
  taskDeadline: {
    fontSize: 12,
    color: theme.colors.text.secondary,
  },
  taskStatus: {
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 4,
  },
  taskStatusText: {
    fontSize: 12,
    color: theme.colors.white,
  },
  progressContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  progressBar: {
    flex: 1,
    height: 4,
    backgroundColor: theme.colors.border.light,
    borderRadius: 2,
    marginRight: 8,
  },
  progressFill: {
    height: '100%',
    borderRadius: 2,
  },
  progressText: {
    fontSize: 12,
    color: theme.colors.text.secondary,
    width: 40,
    textAlign: 'right',
  },
  noticeCard: {
    backgroundColor: theme.colors.white,
    borderRadius: 12,
    padding: 16,
    marginBottom: 12,
    flexDirection: 'row',
    alignItems: 'center',
    ...theme.shadows,
  },
  noticeIconContainer: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: theme.colors.primaryLight,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 12,
  },
  noticeContent: {
    flex: 1,
  },
  noticeTitle: {
    fontSize: 16,
    fontWeight: '500',
    color: theme.colors.text.primary,
    marginBottom: 4,
  },
  noticeDate: {
    fontSize: 12,
    color: theme.colors.text.secondary,
  },
});